<template>
	<ul class="catalogue">
		<h3>{{title}}</h3>
		<li
			:class="index === activeIndex ? 'active' : ''"
			v-for="(item,index) in list"
			:key="item.text"
		>
			<a :href="`#${item.url}`">{{item.text}}</a>
		</li>
	</ul>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    /**
     * @param {String} text
     * @param {String} url
     */
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      activeIndex: 0
    }
  },
  watch: {
    '$route': {
      handler(route) {
        if (route.hash) {
          this.activeIndex = this.list.findIndex(item => item.text === decodeURI(route.hash).split('#')[ 1 ]) || 0
        } else {
          this.activeIndex = 0
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.catalogue {
  list-style: none;

  h3 {
    margin-bottom: 10px;
  }

  li {
    padding: 10px 5px;
    border-radius: $radiusMiddle;

    a {
      display: block;

      &:hover {
        text-decoration: none;
      }
    }

    &.active {
      color: $blue;
      background-color: $blue01;
    }
  }
}
</style>
